import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue';
import Homepage from '../components/homepage/Homepage.vue';
import PersonalCenter from '../components/personal-center/PersonalCenter.vue';
import ClubDetail from '../components/club-detail/ClubDetail.vue';
import ClubList from '../components/club-list/ClubList.vue';
import SearchResult from '@/components/search-result/SearchResult.vue';
import LeaderBottomRightComponent from '@/components/personal-center/LeaderBottomRightComponent.vue';
import SecondLeaderBottomRightComponent from '@/components/personal-center/SecondLeaderBottomRightComponent.vue';
import LoginSwitch from '../views/LoginSwitch.vue';
import Community from '../components/community/Community.vue';
import ClubAudit from '@/views/ClubAudit.vue';
import ClubManagement from '@/views/ClubManagement.vue';
import UserManagement from '@/views/UserManagement.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: Homepage,
    meta: {
      keepAlive: true,
    }
  },
  {
    path: '/login',
    name: 'Login',
    component: LoginSwitch
  },
  {
    path: '/homepage',
    name: 'Homepage',
    component: Homepage,
    meta: {
      keepAlive: true,
    }
  },
  {
    path: '/personal-center',
    name: 'PersonalCenter',
    component: PersonalCenter,
    meta: {
      keepAlive: true,
    }
  },
  {
    path: '/club-detail',
    name: 'ClubDetail',
    component: ClubDetail,
    meta: {
      keepAlive: true,
    }
  },
  {
    path: '/club-list',
    name: 'ClubList',
    component: ClubList,
    meta: {
      keepAlive: true,
    }
  },
  {
    path: '/search-result',
    name: 'SearchResult',
    component: SearchResult,
    meta: {
      keepAlive: true,
    }
  },
  {
    path: "/leader-management",
    name: "LeaderBottomRightComponent",
    component:LeaderBottomRightComponent,
    meta: {
      keepAlive: true,
    }
  },

  {
    path: '/second-leader-management',
    name: "SecondLeaderBottomRightComponent",
    component:SecondLeaderBottomRightComponent,
    meta: {
      keepAlive: true,
    }
  },


  {
    path: '/club-audit',
    name: "ClubAudit",
    component:ClubAudit,
    meta: {
      keepAlive: true,
    }
  },
  {
    path: '/club-management',
    name: "ClubManagement",
    component:ClubManagement,
    meta: {
      keepAlive: false
    }
  },
  {
    path: '/user-management',
    name: "UserManagement",
    component:UserManagement,
    meta: {
      keepAlive: false,
    }
  },
  

  {
    path: '/community-detail',
    name: 'CommunityDetail',
    component: Community,
    props: route => ({ clubId: route.query.clubId }),
    meta: {
      keepAlive: true,
    }
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: function () {
      return import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
    },
    meta: {
      keepAlive: true,
    }
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router
